<template>
  <layout-content-vertical-nav :nav-menu-items="navMenuItems">
    <slot></slot>

    <template #navbar="{ toggleVerticalNavMenuActive }">
      <div class="navbar-content-container">
        <div class="d-flex align-center">
          <v-icon v-if="$vuetify.breakpoint.mdAndDown" class="me-3" @click="toggleVerticalNavMenuActive">
            {{ icons.mdiMenu }}
          </v-icon>
        </div>

        <!-- Right Content: I18n, Light/Dark, Notification & User Dropdown -->
        <div class="d-flex align-center right-row">
          <!-- <app-bar-theme-switcher></app-bar-theme-switcher> -->

          <v-menu open-on-hover min-width="120" offset-y auto transition="scale-transition" close-delay="200">
            <template v-slot:activator="{ on, attrs }">
              <div class="d-flex justify-start align-center px-5" v-bind="attrs" v-on="on" style="cursor: pointer">
                <img width="22" src="@/assets/images/en.svg" v-if="$i18n.locale == 'en'" />
                <img width="22" src="@/assets/images/ja.svg" v-else-if="$i18n.locale == 'ja'" />
                <img width="22" src="@/assets/images/kr.svg" v-else-if="$i18n.locale == 'kr'" />
                <img width="22" src="@/assets/images/zh.svg" v-else-if="$i18n.locale == 'zh'" />
                <img width="22" src="@/assets/images/en.svg" v-else />
              </div>
            </template>
            <v-list class="nav-menu-list pa-0">
              <v-list-item @click="selectLanguage('zh')">
                <div class="d-flex justify-start align-center">
                  <img width="22" src="@/assets/images/zh.svg" />
                  <div class="ml-2 text-body-2">简体中文</div>
                </div>
              </v-list-item>
              <v-list-item @click="selectLanguage('en')">
                <div class="d-flex justify-start align-center">
                  <img width="22" src="@/assets/images/en.svg" />
                  <div class="ml-2 text-body-2">English</div>
                </div>
              </v-list-item>
              <v-list-item @click="selectLanguage('ja')">
                <div class="d-flex justify-start align-center">
                  <img width="22" src="@/assets/images/ja.svg" />
                  <div class="ml-2 text-body-2">日本語</div>
                </div>
              </v-list-item>

              <v-list-item @click="selectLanguage('kr')">
                <div class="d-flex justify-start align-center">
                  <img width="22" src="@/assets/images/kr.svg" />
                  <div class="ml-2 text-body-2">한국어</div>
                </div>
              </v-list-item>
            </v-list>
          </v-menu>

          <v-menu v-if="ethAddress" offset-y :close-on-content-click="closeOnContentClick">
            <template v-slot:activator="{ on, attrs }">
              <v-btn v-if="networkError" class="mr-4" color="error" small dark rounded outlined v-bind="attrs" v-on="on">
                <v-icon class="mr-2">
                  {{ icons.mdiAlertOutline }}
                </v-icon>
                Switch Network
              </v-btn>
              <v-btn v-else-if="curChainData" class="mr-4" color="secondary" small dark rounded outlined v-bind="attrs"
                v-on="on">
                <v-img class="mr-2 d-none d-md-flex" max-width="18px" :src="'/images/' + curChainData.logo"></v-img>
                {{ curChainData.name }}
              </v-btn>
            </template>

            <v-list>
              <template v-for="(item, index) in GlobalConfig.ChainList">
                <v-list-item :key="item.chainId">
                  <div v-if="ethChainID != null && item.chainId != ethChainID" class="d-flex align-center pointer"
                    @click="switchNetWork(item.chainId)">
                    <v-img class="mr-2" max-width="18px" :src="'/images/' + item.logo"> </v-img>
                    <v-list-item-title>{{ item.name }}</v-list-item-title>
                  </div>

                  <div v-else class="d-flex align-center pointer">
                    <v-img class="mr-2 mb-1" max-width="18px" :src="'/images/' + item.logo">
                    </v-img>
                    <v-list-item-title>{{ item.name }}</v-list-item-title>
                    <span class="ml-2">
                      <v-badge color="success" dot bordered right inline></v-badge>
                    </span>
                  </div>
                </v-list-item>
              </template>
            </v-list>
          </v-menu>
          <v-icon v-if="!ethAddress" class="pointer" @click="connectWallet">
            {{ icons.mdiWalletOutline }}
          </v-icon>
          <v-menu v-else offset-y :close-on-content-click="closeOnContentClick" class="ml-4">
            <template v-slot:activator="{ on, attrs }">
              <div class="d-flex align-center pointer" v-bind="attrs" v-on="on">
                <v-img v-if="ethAddress" class="mr-1" max-width="18px" src="@/assets/images/svg/metamask-fox.svg">
                </v-img>
                <p class="text-subtitle-2 secondary--text mr-1 d-flex d-md-none">
                  {{ getShortAddress(true) }}
                </p>
                <p class="text-subtitle-2 secondary--text mr-1 d-none d-md-flex">
                  {{ getShortAddress(false) }}
                </p>
                <v-icon>{{ icons.mdiChevronDown }}</v-icon>
              </div>
            </template>

            <v-list>
              <v-list-item>
                <div class="d-flex align-center pointer" @click="copyAddressText">
                  <v-icon small>
                    {{ icons.mdiContentCopy }}
                  </v-icon>
                  <p class="font-14 color-8C ml-2">
                    {{ $t("Page.Wallet.CopyTip") }}
                  </p>
                </div>
              </v-list-item>
              <v-list-item>
                <div class="d-flex align-center pointer" @click="connectWallet">
                  <v-icon small>
                    {{ icons.mdiWalletOutline }}
                  </v-icon>
                  <p class="font-14 color-8C ml-2">
                    {{ $t("Page.Wallet.OpenWallet") }}
                  </p>
                </div>
              </v-list-item>
            </v-list>
          </v-menu>
        </div>
      </div>
    </template>
    <connect-wallet-dialog ref="connectWallet" />
  </layout-content-vertical-nav>
</template>

<script>
import {
  mdiAlertOutline,
  mdiChevronDown,
  mdiContentCopy,
  mdiEthereum,
  mdiHeartOutline,
  mdiMenu,
  mdiWalletOutline,
} from "@mdi/js";

import AppBarThemeSwitcher from "@core/layouts/components/app-bar/AppBarThemeSwitcher.vue";

// Search Data
import LayoutContentVerticalNav from "@/@core/layouts/variants/content/vertical-nav/LayoutContentVerticalNav.vue";
import navMenuItems from "@/navigation/vertical";
import { switchNetWork } from "@/utils/wallet";
import ConnectWalletDialog from "@/views/dialog/walletDialog.vue";
import { mapState } from "vuex";

export default {
  components: {
    LayoutContentVerticalNav,
    AppBarThemeSwitcher,
    ConnectWalletDialog,
  },
  data() {
    return {
      closeOnContentClick: true,
      curChainData: null,
      navMenuItems: navMenuItems,
    };
  },
  methods: {
    connectWallet() {
      this.$refs.connectWallet.open();
    },

    selectLanguage(locale) {
      //notify store
      this.$store.commit("i18n/setLanguage", locale);
    },

    async switchNetWork(toChainId) {
      await switchNetWork(this, toChainId).catch(err => {
        this.$q.err(err);
      });
    },
    copyAddressText() {
      this.$copyText(this.ethAddress).then(() => {
        this.$notify({
          group: "foo",
          type: "success",
          title: "",
          text: "Copy success",
        });
      });
    },
    getCurrentChainData() {
      // to string
      const chainId = `${this.ethChainID}`;
      this.changeContractAddress(
        chainId === "97"
          ? {
            contractAddress: "0xa4B068aD60766E20283C0424C1F543E45100cFE3",
            pledgeContractAddress: "0xEC52e76571950da8dD20ecf1b065C6699164BD58",
          }
          : {
            contractAddress: "0x405e7454e71aefe8897438adc08e3f3e6d49dfc1",
            pledgeContractAddress: "0xd7ae0a202608fA8F37d25706C06b1eE8E4d44D75",
          }
      );
      console.log(this.contract);
      this.curChainData = this.GlobalConfig.ChainList.find(item => item.chainId == chainId);
      if (!this.curChainData) {
        this.$store.commit("networkError", true);
      } else {
        this.$store.commit("networkError", false);
      }
    },
    getShortAddress(mini) {
      if (mini) {
        return `${this.ethAddress.slice(0, 2)}${this.ethAddress.slice(-4)}`;
      } else {
        return `${this.ethAddress.slice(0, 4)}...${this.ethAddress.slice(-4)}`;
      }
    },
  },
  computed: {
    ...mapState(["ethAddress", "ethChainID", "walletName", "networkError", "GlobalConfig"]),
    isReady() {
      return this.ethChainID && this.ethAddress;
    },
  },
  watch: {
    isReady(value) {
      if (value) {
        this.getCurrentChainData();
      }
    },
    ethChainID(value) {
      this.getCurrentChainData();
    },
  },
  mounted() {
    if (this.isReady) {
      this.getCurrentChainData();
    }
  },
  setup() {
    return {
      icons: {
        mdiMenu,
        mdiHeartOutline,
        mdiWalletOutline,
        mdiEthereum,
        mdiChevronDown,
        mdiContentCopy,
        mdiAlertOutline,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.navbar-content-container {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  position: relative;
}

// ? Handle bg of autocomplete for blured appBar
.v-app-bar.bg-blur {
  .expanded-search {
    ::v-deep .app-bar-autocomplete-box div[role="combobox"] {
      background-color: transparent;
    }

    >.d-flex>button.v-icon {
      display: none;
    }

    // ===

    &>.right-row {
      visibility: hidden;
      opacity: 0;
    }

    ::v-deep .app-bar-search-toggler {
      visibility: hidden;
    }
  }
}
</style>
